<template>
  <view class="container">
    <uni-nav-bar title="阅读需知" color="#FFFFFF" backgroundColor="#99D0CD" statusBar="true" left-icon="back" shadow="false"
      @clickLeft="onLeftClick">

    </uni-nav-bar>
    <!-- 阅读内容区域 -->
    <view class="content">
      <view class="content-text">
        <text>(2) 若操作者违反声明条款并造成第三方损失，需自行承担赔偿及诉讼费用；</text>
        <text>(3) 建议操作者购买VR眼镜第三者责任险（最低保额建议≥1万元）。</text>
        <text>八、条款修订说明</text>
        <text>本声明可能根据法律法规或运营需求进行修订，修订内容将在平台公示，用户继续使用即视为接受更新后的条款</text>
        <!-- 重复多次以确保有足够的阅读内容 -->
        <text v-for="i in 5" :key="i">
          (2) 若操作者违反声明条款并造成第三方损失，需自行承担赔偿及诉讼费用；
          (3) 建议操作者购买VR眼镜第三者责任险（最低保额建议≥1万元）。
          八、条款修订说明
          本声明可能根据法律法规或运营需求进行修订，修订内容将在平台公示，用户继续使用即视为接受更新后的条款
        </text>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="footer">
      <!-- 使用uni-button实现跨平台按钮 -->
      <button class="confirm-btn" :class="{ 'active': countdown === 0 }" :disabled="countdown > 0" type="default"
        @click="handleConfirm">
        已阅读并确认{{ countdown > 0 ? `(${countdown}秒)` : '' }}
      </button>
    </view>
  </view>
</template>

<script>
import { createOrder } from '@/api/meal'

export default {
  data() {
    return {
      countdown: 10,
      timer: null,
      planUuid: null
    }
  },
  onLoad(options) {
    this.planUuid = options.uuid
  },
  onReady() {
    uni.setNavigationBarColor({
      backgroundColor: '#99D0CD'
    })
  },

  methods: {
    // 开始倒计时
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          this.stopCountdown();
        }
      }, 1000);
    },

    // 停止倒计时
    stopCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    // 确认按钮点击事件
    async handleConfirm() {
      if (this.countdown === 0) {
        uni.showLoading({
          title: '正在租用中',
          mask: true,
        })
        try {
          const res = await createOrder(this.planUuid)
          console.log(res)
        } catch (error) {
          uni.hideLoading()
        }
      }
    },
    onLeftClick() {
      uni.navigateBack({
        delta: 1
      })
    }
  },

  // 组件创建时开始倒计时
  created() {
    this.startCountdown();
  },

  // 组件销毁时清除定时器
  beforeDestroy() {
    this.stopCountdown();
  }
}
</script>

<style>
/* 容器布局 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* 内容区域样式 */
.content {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
  overflow-y: auto;
}

.content-text {
  display: flex;
  flex-direction: column;
  line-height: 1.8;
  font-size: 28rpx;
  color: #333;
}

/* 底部区域样式 */
.footer {
  padding: 20rpx;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
}

/* 按钮基础样式 */
.confirm-btn {
  width: 80%;
  height: 80rpx;
  background-color: #ccc !important;
  color: #fff !important;
  border-radius: 40rpx !important;
  font-size: 32rpx !important;
  line-height: 80rpx !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 按钮激活状态（可点击） */
.confirm-btn.active {
  background-color: #07C160 !important;
}

/* 按钮禁用状态 */
.confirm-btn[disabled] {
  opacity: 0.6 !important;
}
</style>